<template>
    <div>
        <div class="article">
            <h2>详情</h2>
            <div class="article-info mui-clearfix">
                <img src="https://img2.mukewang.com/5a7ad38d000142ec10241024-100-100.jpg" alt="">
                <span class="author-name">mumu</span>
                <span class="time mui-pull-right">{{time | dataFormat}}</span>
            </div>
            <div class="article-content">
                <!-- <img class="preview-img" v-for="(item,index) in slide1" :key="item.title" :src="item.msrc" @click="$preview.open(index, slide1)"> -->
                点击图片查看大图
                <template>
                    <vue-preview :slides="slide1" @close="handleClose"></vue-preview>
                </template>
                <div class="article-mu">
                    <img src="../../assets/images/mu.gif" alt="">
                </div>
            </div>
            <div class="article-label">
                <span><i class="mui-icon-extra mui-icon-extra-xiaoshuo parmery"></i>阅读：67</span>
                <span class="mui-pull-right"><i class="mui-icon-extra mui-icon-extra-heart-filled"></i>喜欢: 45435</span>
            </div>
        </div>
        
        <comment-vue :id="id"></comment-vue>
    </div>
</template>

<script>
import { Toast } from "mint-ui";
import comment from '@/components/comment/comment'

export default {
    data () {
        return {
            id: this.$route.params.id,
            time: new Date('2018/12/30 19:18:40'),
            slide1: [
                {
                    src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
                    msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
                    alt: 'picture1',
                    title: 'Image Caption 1',
                    w: 600,
                    h: 400
                },
                {
                    src: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg',
                    msrc: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg',
                    alt: 'picture2',
                    title: 'Image Caption 2',
                    w: 1200,
                    h: 900
                }
            ]
        }
    },
    created () {
    },
    methods: {
        handleClose () {
            console.log('close event')
        }
    },
    components: {
        'comment-vue': comment
    }
}
</script>

<style scope>
.article{
    padding:.16rem;
    line-height: 1.8;
    background: #fff;
}
.article h2{
    font-size: .18rem;
    line-height: 1.8;
}
.article-info{
    padding: .05rem 0 .02rem;
    color: #999;
    font-size: 12px;
    border-bottom: 1px solid #f5f5f5;
}
.article-info img{
    width: .14rem;
    margin-right: .03rem;
    vertical-align: text-bottom;
    border-radius: 50%;
}
.article-content{
    color: #333;
    font-size: .14rem;
    padding: .2rem 0;
}
.article-content img{
    width:100%;
}
.article-content ul{
    font-size:.14rem;
}
.article-content ul li{
    padding-left:.16rem;
}
.article-content p{
    color: #666;
}
.article-mu img{
    width: 50%;
    margin: .2rem auto;
    display: block;
}
.article-label{
    font-size: 12px;
    color: #999;
}
.article-label i{
    font-size: .14rem;
    vertical-align: text-bottom;
    color: red;
    padding-right: 3px;
}
.article-label i.parmery{
    color:rgb(84, 111, 170)
}
.my-gallery figure{
    margin:1em 0;
}
</style>
